<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GDP</title>
    <script src="../../lib/d3.js"></script>
    <script src="../../lib/echarts.js"></script>
</head>
<body>
<div id="main" style="height:100vh;width: 100vw; "></div>
<script src="../../lib/china.js" type="text/javascript"></script>
<script>

            var myChart = echarts.init(document.getElementById('main'));
            var geoCoordMap = {
                "海门":[121.15,31.89],
                "鄂尔多斯":[109.781327,39.608266],
                "招远":[120.38,37.35],
                "舟山":[122.207216,29.985295],
                "齐齐哈尔":[123.97,47.33]
            };

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            var option = {
                timeline: {
                    axisType: 'category',
                    autoPlay: true,
                    playInterval: 2000,
                    symbol: 'circle',
                    inverse: false,
                    rewind: true,
                    symbolSize: 5,
                    checkpointStyle: {
                        symbol: 'circle',
                        symbolSize: 7,
                        color: '#aed2ff',
                        borderColor: "#aed2ff"
                    },
                    left: "1%",
                    width: '90%',
                    height: '36',
                    lineStyle: {
                        color: "#454e72"
                    },
                    label: {
                        normal: {
                            textStyle: {
                                color: "#aed2ff",
                                fontSize: 14,
                            }
                        },
                        position: 15,
                        formatter: function(value, index) {
                            return value.replace(/-/g, ".");
                        }
                    },
                    data: ['05-15','05-16']
                },
                baseOption: {

                    backgroundColor: '#404a59',
                    title: {
                        text: '全国主要城市空气质量',
                        subtext: 'data from xiaoYu3328',
                        sublink: 'http://localhost',
                        x: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.name + ' : ' + params.value[2];
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        y: 'bottom',
                        x: 'right',
                        data: ['pm2.5'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 200,
                        calculable: true,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: [
                        {
                            name: 'pm2.5',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: convertData([
                                {name: "海门", value: 9},
                                {name: "鄂尔多斯", value: 12},
                                {name: "招远", value: 12},
                                {name: "舟山", value: 12},
                                {name: "齐齐哈尔", value: 14}

                            ]),
                            symbolSize: 12,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                }
                            }
                        }
                    ]

                }, options:[{
                    title: {
                        text: '全国主要城市空气质量',
                        subtext: 'data from xiaoYu3328',
                        sublink: 'http://localhost',
                        x: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },series: [
                        {
                            name: 'pm2.5',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: convertData([
                                {name: "海门", value: 9},
                                {name: "鄂尔多斯", value: 555},
                                {name: "招远", value: 12},
                                {name: "舟山", value: 12},
                                {name: "齐齐哈尔", value: 14}
                            ])}]
                },{
                    title: {
                        text: '全国主要城市空气质量',
                        subtext: 'data from xiaoYu3328',
                        sublink: 'http://localhost',
                        x: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },series: [
                        {
                            name: 'pm2.5',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: convertData([
                                {name: "海门", value: 9},
                                {name: "鄂尔多斯", value: 5},
                                {name: "招远", value: 12},
                                {name: "舟山", value: 12},
                                {name: "齐齐哈尔", value: 14}
                            ])}]
                }]
            };


            myChart.setOption(option);
            d3.select("canvas").style("opacity", 0)
                .transition()
                .duration(1000)
                .style("opacity", 1);


</script>
</body>
</html>